<template>
	<Tabs>
		<TabPane label="编辑会员分组">
			<div>
				<div class="ui-tab-navs">
					<a
						class="ui-tab-navs-cell"
						href="javascript:;"
						v-for="item in types"
						:class="{active: formData.type == item.type, disabled: formData.id && formData.type != item.type}"
						@click="handleChangeType(item)"
					>
						<p class="title">{{ item.title }} </p>
						<p class="desc">（{{ item.desc }}）</p>
					</a>
				</div>
				<p style="margin-top: 15px;">注意：一旦选择会员分组类型并新增分组成功后，会员分组类型不可变</p>
				<Divider />
			</div>
		
			<Form ref="form" :model="formData" label-position="top" :rules="rules">
				<FormDescItem label="分组名称" prop="name" desc="分组名称不能为空，最长不能超过200个字符，分组名称不可重复">
					<Input v-model="formData.name" />
				</FormDescItem>
				<FormDescItem label="分组描述" desc="填写此分组的描述内容，此类目选填">
					<Input v-model="formData.description" type="textarea" :rows="5" />
				</FormDescItem>
				<div v-show="formData.type == 0">
					<FormItem label="满足条件">
						<RadioGroup>
					        <Radio label="满足被选中的任意一个"></Radio>
					        <Radio label="需满足被选中的所有条件"></Radio>
					    </RadioGroup>
					</FormItem>
					<Divider />
					<ui-box solid :radius="false">
						<Row :gutter="30">
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>指定时间周期产生消费</Checkbox>
								</div>
								<DatePicker type="datetimerange" placeholder="请选择" style="width: 100%;"></DatePicker>
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>累计消费次数(仅限下单并产生付款)</Checkbox>
								</div>
								<InputNumber :min="0" :precision="0" style="width: 100%;" />
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>累计消费金额(仅限下单并产生付款)</Checkbox>
								</div>
								<InputNumber :min="0" :precision="2" style="width: 100%;" />
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>客单价达到金额(仅限下单并产生付款)</Checkbox>
								</div>
								<InputNumber :min="0" :precision="2" style="width: 100%;" />
							</Col>
						</Row>
						<Row :gutter="30" style="margin-top: 20px;">
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>累计获得积分</Checkbox>
								</div>
								<InputNumber :min="0" :precision="0" style="width: 100%;" />
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>购买以下任意分类产品(多选)</Checkbox>
								</div>
								<Input />
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>购买以下任意品牌产品(多选)</Checkbox>
								</div>
							    <SelectBrand multiple style="width: 100%;"></SelectBrand>
							</Col>
							<Col span="6">
								<div style="margin-bottom: 8px;">
									<Checkbox>购买以下任意产品(多选)</Checkbox>
								</div>
								<div>
									<Button type="primary">选择商品</Button>
									<Button type="dashed" disabled>查看所选商品</Button>
								</div>
							</Col>
						</Row>
					</ui-box>
				</div>
				<FormItem>
					<Button type="primary" :loading="committing" @click="handleSubmit">保存设置并启用</Button>
					<Button @click="handleBack">返回列表</Button>
				</FormItem>
			</Form>
		</TabPane>
	</Tabs>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
import InputTags from '@/components/form/InputTags.vue';
import SelectBrand from '@/components/form/SelectBrand.vue';
export default {
	components: {
		FormDescItem,
		InputTags,
		SelectBrand
	},
	data() {
		return {
			committing: false,
			types: [
				{
					type: 0,
					title: '智能分组',
					desc: '无需人工干预'
				},
				{
					type: 1,
					title: '手动分组',
					desc: '需手动指派'
				}
			],
			formData: {
				id: '',
				type: 0,
				name: '',
				member_ids: [],
				description: ''
			},
			rules: {
				name: [
					{required: true, message: "请填会员分组名称", trigger: "blur"}
				]
			}
		}
	},
	mounted() {
		if(this.$route.query.id) {
			this.formData.id = this.$route.query.id;
			this.init();
		}
	},
	methods: {
		init() {
			Util.ajax.post(this.API['API_MEMBER_GROUP_DETAIL'], {id: this.formData.id}).then((res) => {
				this.formData.name = res.name;
				this.formData.description = res.description;
			}).catch(() => {
				
			})
		},
		// 选择类型
		handleChangeType(item) {
			this.formData.type = item.type;
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let params = {
                		name: this.formData.name,
                		description: this.formData.description
                	}
                	this.committing = true;
                	if(this.formData.id) {
                		params.id = this.formData.id;
                		Util.ajax.post(this.API['API_MEMBER_GROUP_SAVE'], params).then(() => {
                			this.$Message.success({
                				content: '编辑成功',
                				onClose: () => {
                					this.handleBack();
                				}
                			})
                		})
                	}else{
                		Util.ajax.post(this.API['API_MEMBER_GROUP_CREATE'], params).then(() => {
                			this.$Message.success({
                				content: '添加成功',
                				onClose: () => {
                					this.handleBack();
                				}
                			})
                		})
                	}
                }
            });
		},
		// 返回列表
		handleBack() {
			this.$router.back();
		}
	}
}
</script>